﻿﻿<html>
<head>
    <title>管理中心</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!-- ExtJS -->
    <link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all-neptune.css"/>
    <script type="text/javascript" src="lib/ext/ext-all.js"></script>
    <script type="text/javascript" src="lib/login_ok.js"></script>
    <!-- GC -->

</head>

<body>

<script type="text/javascript">
    //引入Extjs所有类
    Ext.require(['*']);
    /**
     * 程序主入口
     */
    Ext.onReady(function() {
        /**
         * 上,panel.Panel
         */
        this.topPanel = Ext.create('Ext.Component', {
            region: 'north',
            height: 50,
            hidden:false,
            autoEl: {
                tag: 'div',
                html: '<h1 style="float:left">丝绸之路振兴会后台管理系统</h1><a href="login.html" ' +
                        'style="font-size:20px;float:right;margin-right:20px;margin-top:20px;" >退出</a>'
            }
        });
        /**
         * 左,panel.Panel
         */
        this.leftPanel = Ext.create('Ext.panel.Panel', {
            title : '导航栏',
            region: 'west',
            stateId: 'navigation-panel',
            id: 'west-panel',
            split: true,
            width: 250,
            minWidth: 200,
            maxWidth: 400,
            collapsible: true,
            animCollapse: true,
            margins: '0 0 0 5',
            layout: 'accordion'
        });
        /**
         * 右,tab.Panel
         */
        this.rightPanel =  Ext.create('Ext.tab.Panel', {
            id: 'tabPanel',
            region: 'center', //中心区在框布局中是必须定义的
            deferredRender: false
            //activeTab: 0     //设置第一个选项卡为默认显示的
        });
        /**
         * 组建树
         */
        var buildTree = function(json) {
            return Ext.create('Ext.tree.Panel', {
                rootVisible : false,
                border : false,
                store : Ext.create('Ext.data.TreeStore', {
                    root : {
                        expanded : true,
                        children : json.children
                    }
                }),
                listeners : {
                    //当点击节点时，执行函数：
                    'itemclick': function (view, selectedItem) {
                        //获得tab容器tabpanel
                        var tabPanel = Ext.getCmp('tabPanel');
                        //获得被选中的tab组建对象
                        var tab = tabPanel.getComponent(selectedItem.data.id);
                        //如果此tab还未被创建，则向tab容器添加一个tab
                        if (!tab) {
                            tab = tabPanel.add({
                                id: selectedItem.data.id,
                                title: selectedItem.data.text,
                                closable: true,
                                autoWidth: true,
                                autoHeight: true,
                                active: true,//为了兼容IE9
                                html: '<iframe width="100%" height="100%" frameborder="0" src="' + selectedItem.data.hrefTarget + '"></iframe>'
                            });

                            //将tab设置为当前可见可操作tab
                            tabPanel.setActiveTab(tab);//其实这步是多余的，但是在IE9下，没这步就显示不正常。
                        }else {
                            tabPanel.update(tab);
                            //将tab设置为当前可见可操作tab
                            tabPanel.setActiveTab(tab);
                        }


                    }
                }
            });
        };
        /**
         * 加载菜单树
         */
        Ext.Ajax.request({
            url : '/res/authed/list?node=0',
            success : function(response) {
                var json = Ext.JSON.decode(response.responseText)
                Ext.each(json.data, function(el) {
                    var panel = Ext.create(
                            'Ext.panel.Panel', {
                                id : el.id,
                                title : el.text,
                                layout : 'fit'
                            });
                    panel.add(buildTree(el));
                    leftPanel.add(panel);
                });
            },
            failure : function(response, opts) {
                var json = Ext.JSON.decode(response.responseText)
                Ext.MessageBox.show({
                    title : '操作提示',
                    msg : json.error,
                    buttons : Ext.MessageBox.OK,
                    icon : Ext.MessageBox.ERROR
                });
            },
            method : 'get'
        });
        /**
         * Viewport
         */
        Ext.create('Ext.container.Viewport', {
            layout : 'border',
            renderTo : Ext.getBody(),
            items : [this.topPanel, this.leftPanel, this.rightPanel]
        });
    });

</script>
</body>
</html>
